<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task2-18</title>
    <style>
        body,html {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .container {
            width: 600px;
            height: 600px;
            margin: 150px auto;
            background-color: #cde6c7;
            text-align: center;
            padding: 100px 0;
            box-sizing: border-box;
        }
        .inputNum {
            width: 200px;
            height: 30px;
            border: 0;
            vertical-align: middle;
            font-size: 16px;
        }
        .inputConfirm,.display span {
            width: 50px;
            color: #fff;
            font-size: 20px;
            line-height: 30px;
            padding: 5px;
            margin-right: 10px;
            background-color: #45b97c;
            vertical-align: middle;
        }
        .display {
            padding: 30px;
        }
        .display span {
            background-color: #65c294;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div class="container">
        <input type="text" class="inputNum" id="inputNum" placeholder="  请输入数字"><span class="inputConfirm" onclick="handleFun('leftIn')">左侧入</span><span class="inputConfirm" onclick="handleFun('rightIn')">右侧入</span><span class="inputConfirm" onclick="handleFun('leftOut')">左侧出</span><span class="inputConfirm" onclick="handleFun('rightOut')">右侧出</span>
        <div class="display" id="display">
        </div>
    </div>
    <script>
    var handleFun = function(func){
        var inputNum=document.getElementById('inputNum').value;
        var $display=document.getElementById('display');
        if(!isNaN(inputNum)){
            var $num=document.createElement("span");
            $num.innerHTML=inputNum;
            $num.addEventListener('click',function(){
                //触发click代码
                this.parentNode.removeChild(this);
            });
            switch(func){
                case "leftIn":if(inputNum){$display.insertBefore($num,$display.firstElementChild);}else{alert("输入不能为空");};break;
                case "rightIn":if(inputNum){$display.appendChild($num);}else{alert("输入不能为空");};break;
                case "leftOut":$display.removeChild($display.firstElementChild);break;
                case "rightOut":$display.removeChild($display.lastElementChild);break;
            }
        } else {
            alert("你输入的不是数字，请输入数字。");
        }
    }
    </script>
</body>
</html>